<template>
<div>
  <div class="texts">
    <van-field
        v-model="message"
        rows="2"
        autosize
        label="评论"
        type="textarea"
        maxlength="50"
        placeholder="请输入评论"
        show-word-limit
    />
    <span @click="addMessage">发表评论</span>
  </div>
  <div>
    <ul>
      <li v-for="(item,index) in messageList" :key="index">{{item}}</li>
    </ul>
  </div>
</div>
</template>

<script>
export default {
name: "NewsComment",
  data(){
  return{
    message:"",
    messageList:[],
  }
  },
  methods:{
  addMessage(){
    this.messageList.push(this.message)
  }
  }
}
</script>

<style lang="less" scoped>
.texts{
  width: 100%;
  border: 1px solid red;
  position: relative;
  span{
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #1989fa;
    border-radius: 6px;
    padding: 2px;
  }
}
</style>